<template>
	<view class="tech-container">
		<!-- 背景动态粒子效果 -->
		<view class="bg-particles"></view>

		<!-- 顶部工具栏 -->
		<view class="tech-toolbar">
			<view class="toolbar-left">
				<el-button type="primary" size="small" @click="show1 = true" class="tech-btn tech-btn-primary" icon="el-icon-plus">
					<span class="btn-text">新增课程</span>
				</el-button>
			</view>

			<view class="toolbar-right">
				<el-input
					placeholder="🔍 搜索资源名称"
					v-model="params.searchText"
					@change="confirmSearch"
					class="tech-input"
					size="small"
					prefix-icon="el-icon-search"
					clearable />

				<el-switch
					v-model="params.isNice"
					active-text="✨ 精选内容"
					inactive-text=""
					class="tech-switch"
					active-color="#00d4ff"
					@change="confirmSearch" />
			</view>
		</view>

		<!-- 数据表格区域 -->
		<view class="tech-table-container">
			<el-table
				:data="dataList"
				class="tech-table"
				stripe
				size="small"
				height="calc(100% - 80px)"
				:header-cell-style="{background: 'rgba(0, 212, 255, 0.1)', color: '#00d4ff', fontWeight: 'bold', borderColor: 'rgba(0, 212, 255, 0.2)'}">

				<el-table-column type="index" width="60" label="#" align="center">
				</el-table-column>

				<el-table-column prop="number" label="📋 编号" width="140" show-overflow-tooltip>
				</el-table-column>

				<el-table-column prop="title" label="📖 标题" width="180" show-overflow-tooltip>
					<template slot-scope="scope">
						<span class="table-title">{{scope.row.title}}</span>
					</template>
				</el-table-column>

				<el-table-column prop="desc" label="📝 描述" width="200" show-overflow-tooltip>
					<template slot-scope="scope">
						<view class="table-desc">{{scope.row.desc}}</view>
					</template>
				</el-table-column>

				<el-table-column prop="age" label="👶 适合年龄" width="100" align="center">
				</el-table-column>

				<el-table-column prop="price" label="💰 价格" width="80" align="center">
					<template slot-scope="scope">
						<span class="price-tag">¥{{scope.row.price}}</span>
					</template>
				</el-table-column>

				<el-table-column prop="images" label="🖼️ 图片" width="100" align="center">
					<template slot-scope="scope">
						<el-image
							class="table-img"
							:src="scope.row.images[0]"
							:preview-src-list="[scope.row.images[0]]"
							fit="cover"/>
					</template>
				</el-table-column>

				<el-table-column prop="downLoadNum" label="📥 下载量" width="100" align="center">
					<template slot-scope="scope">
						<span class="download-badge">{{scope.row.downLoadNum}}</span>
					</template>
				</el-table-column>

				<el-table-column prop="typeDesc" label="🎨 主题" width="100" align="center"/>

				<el-table-column prop="classDesc" label="📚 类型" width="150" show-overflow-tooltip>
				</el-table-column>

				<el-table-column prop="createdAt" label="📅 创建日期" width="160" align="center">
				</el-table-column>

				<el-table-column fixed="right" label="⚙️ 操作" width="160" align="center">
					<template slot-scope="scope">
						<el-button @click="editThis(scope.row)" type="text" size="small" class="tech-btn-text tech-btn-edit">
							✏️ 编辑
						</el-button>
						<el-button @click="deleteThis(scope.row)" type="text" size="small" class="tech-btn-text tech-btn-delete">
							🗑️ 删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页器 -->
			<view class="tech-pagination">
				<el-pagination
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
					:current-page="params.pageNum"
					:page-size="params.pageSize"
					:page-sizes="[20, 40, 60, 80, 100]"
					:page-count="maxPage"
					layout="total, sizes, prev, pager, next, jumper"
					:total="maxCount"
					background>
				</el-pagination>
			</view>
		</view>

		<!-- 弹窗 -->
		<courseEdit v-if="show1" @save="show1 = false,chooseItem='',getData()" :detail="chooseItem"
			@close="show1 = false,chooseItem = ''" :typeDesc="params.typeDesc" classDesc="课程"/>
	</view>
</template>

<script>
	import courseEdit from '@/components/courseEdit'
	let that
	export default {
		components: {
			courseEdit
		},
		data() {
			return {
				show1: false,
				chooseItem: '',
				dataList: [],
				maxCount: 1,
				maxPage: 1,

				params: {
					pageSize: 20,
					pageNum: 1,
					fileType: '课程',
					searchText: '',
					isNice: false,
					status: '全部',
				}
			}
		},

		onLoad() {
			that = this
			that.getData()
		},

		methods: {
			deleteThis(item) {
				uni.showModal({
					content: "是否删除此条目",
					success(res) {
						if (res.confirm) {
							that.$http.Post("admin/artPPT/remove", {
								objectId: item.objectId
							}, "加载中...").then(res => {
								that.getData()
							})
						}
					}
				})
			},

			confirmSearch() {
				that.dataList = []
				that.params.pageNum = 1
				that.getData()
			},

			editThis(item) {
				this.chooseItem = item
				this.show1 = true
			},

			handleCurrentChange(value) {
				that.params.pageNum = value
				that.getData()
			},

			handleSizeChange(value) {
				that.params.pageSize = value
				that.params.pageNum = 1
				that.getData()
			},

			getData() {
				this.$http.Post("admin/artPPT/list", that.params, "加载中...").then(res => {
					for (let item of res.data) {
						item.typeId = item.TypeId
					}
					this.dataList = res.data
					that.maxCount = res.maxCount
					that.maxPage = res.maxPage
				})
			}
		}
	}
</script>

<style scoped>
/* ==================== 全局容器 ==================== */
.tech-container {
	position: relative;
	height: 100vh;
	width: 100%;
	background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0f1419 100%);
	overflow: hidden;
	padding: 20px;
	box-sizing: border-box;
}

/* 背景动态粒子效果 */
.bg-particles {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image:
		radial-gradient(circle at 20% 50%, rgba(0, 212, 255, 0.03) 0%, transparent 50%),
		radial-gradient(circle at 80% 80%, rgba(120, 119, 255, 0.03) 0%, transparent 50%),
		radial-gradient(circle at 40% 20%, rgba(255, 71, 179, 0.02) 0%, transparent 50%);
	animation: particlesMove 20s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

@keyframes particlesMove {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(30px, -30px); }
}

/* ==================== 顶部工具栏 ==================== */
.tech-toolbar {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 25px;
	margin-bottom: 20px;
	background: rgba(15, 20, 40, 0.6);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(0, 212, 255, 0.2);
	border-radius: 16px;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 0 20px rgba(0, 212, 255, 0.1);
	z-index: 1;
	animation: slideDown 0.5s ease-out;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.toolbar-left {
	display: flex;
	align-items: center;
	gap: 15px;
}

.toolbar-right {
	display: flex;
	align-items: center;
	gap: 20px;
}

/* ==================== 科技感按钮 ==================== */
.tech-btn-primary {
	position: relative;
	background: linear-gradient(135deg, #00d4ff 0%, #0084ff 100%) !important;
	border: none !important;
	color: #fff !important;
	font-weight: 600;
	padding: 10px 24px !important;
	border-radius: 8px !important;
	box-shadow:
		0 4px 15px rgba(0, 212, 255, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
}

.tech-btn-primary::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
}

.tech-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow:
		0 8px 25px rgba(0, 212, 255, 0.6),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.tech-btn-primary:hover::before {
	width: 300px;
	height: 300px;
}

.btn-text {
	position: relative;
	z-index: 1;
}

/* ==================== 输入框样式 ==================== */
.tech-input {
	width: 300px;
}

.tech-input >>> .el-input__inner {
	background: rgba(15, 20, 40, 0.6) !important;
	border: 1px solid rgba(0, 212, 255, 0.3) !important;
	color: #fff !important;
	border-radius: 8px;
	padding-left: 40px;
	transition: all 0.3s ease;
}

.tech-input >>> .el-input__inner:focus {
	border-color: #00d4ff !important;
	box-shadow: 0 0 15px rgba(0, 212, 255, 0.4) !important;
	background: rgba(15, 20, 40, 0.8) !important;
}

.tech-input >>> .el-input__inner::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.tech-input >>> .el-input__prefix {
	color: #00d4ff;
}

/* ==================== 开关样式 ==================== */
.tech-switch {
	margin-left: 15px;
}

.tech-switch >>> .el-switch__label {
	color: #fff !important;
	font-weight: 500;
}

.tech-switch >>> .el-switch__core {
	border: 1px solid rgba(0, 212, 255, 0.3);
	background: rgba(15, 20, 40, 0.6) !important;
}

/* ==================== 表格容器 ==================== */
.tech-table-container {
	position: relative;
	height: calc(100vh - 160px);
	background: rgba(15, 20, 40, 0.4);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(0, 212, 255, 0.2);
	border-radius: 16px;
	padding: 20px;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 0 30px rgba(0, 212, 255, 0.05);
	z-index: 1;
	animation: fadeInUp 0.6s ease-out 0.2s both;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==================== 表格样式 ==================== */
.tech-table {
	border-radius: 12px;
	overflow: hidden;
}

.tech-table >>> .el-table {
	background: transparent !important;
	color: #fff !important;
}

.tech-table >>> .el-table th {
	background: rgba(0, 212, 255, 0.1) !important;
	color: #00d4ff !important;
	font-weight: bold;
	border-color: rgba(0, 212, 255, 0.2) !important;
	text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.tech-table >>> .el-table td {
	background: rgba(15, 20, 40, 0.3) !important;
	border-color: rgba(0, 212, 255, 0.1) !important;
	color: rgba(255, 255, 255, 0.9) !important;
}

.tech-table >>> .el-table__row:hover > td {
	background: rgba(0, 212, 255, 0.15) !important;
	transition: all 0.3s ease;
}

.tech-table >>> .el-table--striped .el-table__body tr.el-table__row--striped td {
	background: rgba(15, 20, 40, 0.5) !important;
}

.tech-table >>> .el-table__body tr:hover {
	box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
}

/* 表格内容样式 */
.table-title {
	color: #00d4ff;
	font-weight: 500;
}

.table-desc {
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	line-height: 1.4;
}

.price-tag {
	display: inline-block;
	padding: 4px 12px;
	background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
	color: #fff;
	border-radius: 12px;
	font-weight: 600;
	font-size: 13px;
	box-shadow: 0 2px 8px rgba(255, 107, 157, 0.3);
}

.download-badge {
	display: inline-block;
	padding: 4px 12px;
	background: linear-gradient(135deg, #7877ff 0%, #5e5ce6 100%);
	color: #fff;
	border-radius: 12px;
	font-weight: 600;
	font-size: 13px;
	box-shadow: 0 2px 8px rgba(120, 119, 255, 0.3);
}

.table-img {
	width: 50px !important;
	height: 50px !important;
	border-radius: 8px;
	border: 2px solid rgba(0, 212, 255, 0.3);
	transition: all 0.3s ease;
	cursor: pointer;
}

.table-img:hover {
	transform: scale(1.1);
	border-color: #00d4ff;
	box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
}

/* ==================== 操作按钮 ==================== */
.tech-btn-text {
	font-weight: 500;
	padding: 6px 12px !important;
	border-radius: 6px;
	transition: all 0.3s ease;
}

.tech-btn-edit {
	color: #00d4ff !important;
	background: rgba(0, 212, 255, 0.1);
}

.tech-btn-edit:hover {
	background: rgba(0, 212, 255, 0.2) !important;
	box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
	transform: translateY(-1px);
}

.tech-btn-delete {
	color: #ff6b9d !important;
	background: rgba(255, 107, 157, 0.1);
}

.tech-btn-delete:hover {
	background: rgba(255, 107, 157, 0.2) !important;
	box-shadow: 0 0 10px rgba(255, 107, 157, 0.4);
	transform: translateY(-1px);
}

/* ==================== 分页器样式 ==================== */
.tech-pagination {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 20px 0 0;
	margin-top: 20px;
	border-top: 1px solid rgba(0, 212, 255, 0.1);
}

.tech-pagination >>> .el-pagination {
	display: flex;
	align-items: center;
}

.tech-pagination >>> .el-pagination button,
.tech-pagination >>> .el-pagination .el-pager li {
	background: rgba(15, 20, 40, 0.6) !important;
	border: 1px solid rgba(0, 212, 255, 0.2) !important;
	color: #fff !important;
	border-radius: 6px;
	transition: all 0.3s ease;
}

.tech-pagination >>> .el-pagination button:hover,
.tech-pagination >>> .el-pager li:hover {
	color: #00d4ff !important;
	border-color: #00d4ff !important;
	box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
	transform: translateY(-1px);
}

.tech-pagination >>> .el-pager li.active {
	background: linear-gradient(135deg, #00d4ff 0%, #0084ff 100%) !important;
	border-color: #00d4ff !important;
	color: #fff !important;
	box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
	font-weight: 600;
}

.tech-pagination >>> .el-pagination__total,
.tech-pagination >>> .el-pagination__jump {
	color: rgba(255, 255, 255, 0.8) !important;
}

.tech-pagination >>> .el-select .el-input__inner {
	background: rgba(15, 20, 40, 0.6) !important;
	border-color: rgba(0, 212, 255, 0.2) !important;
	color: #fff !important;
}

.tech-pagination >>> .el-select .el-input__inner:hover {
	border-color: #00d4ff !important;
}

/* ==================== 滚动条样式 ==================== */
.tech-table-container >>> .el-table__body-wrapper::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.tech-table-container >>> .el-table__body-wrapper::-webkit-scrollbar-track {
	background: rgba(15, 20, 40, 0.3);
	border-radius: 4px;
}

.tech-table-container >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
	background: linear-gradient(135deg, #00d4ff 0%, #0084ff 100%);
	border-radius: 4px;
	box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.tech-table-container >>> .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(135deg, #00e4ff 0%, #0094ff 100%);
}

/* ==================== 响应式优化 ==================== */
@media (max-width: 1200px) {
	.tech-toolbar {
		flex-direction: column;
		gap: 15px;
	}

	.toolbar-left,
	.toolbar-right {
		width: 100%;
		justify-content: center;
	}

	.tech-input {
		width: 100%;
		max-width: 400px;
	}
}
</style>
